<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/css/MUI/mui.min.css">
    <style type="text/css">
        #list {
            /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
            margin-top: -1px;
        }
    </style>
</head>
<body>
<h2>Hello World!</h2>
<h3>Demo</h3>
<h5>本项目已经集成了知名移动前端框架MUI，细节请点击完整示例查看</h5>
<body>
<div class="mui-content">
    <div class="mui-card">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">表单</a>
                <div class="mui-collapse-content">
                    <form class="mui-input-group">
                        <div class="mui-input-row">
                            <label>Input</label>
                            <input type="text" placeholder="普通输入框">
                        </div>
                        <div class="mui-input-row">
                            <label>Input</label>
                            <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
                        </div>

                        <div class="mui-input-row mui-plus-visible">
                            <label>Input</label>
                            <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
                        </div>
                        <div class="mui-button-row">
                            <button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>
                            &nbsp;&nbsp;
                            <button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
                        </div>
                    </form>
                </div>
            </li>
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">图片轮播</a>
                <div class="mui-collapse-content">
                    <div id="slider" class="mui-slider">
                        <div class="mui-slider-group mui-slider-loop">
                            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                            <div class="mui-slider-item mui-slider-item-duplicate">
                                <a href="#">
                                    <img src="../images/yuantiao.jpg">
                                </a>
                            </div>
                            <!-- 第一张 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="../images/shuijiao.jpg">
                                </a>
                            </div>
                            <!-- 第二张 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="../images/muwu.jpg">
                                </a>
                            </div>
                            <!-- 第三张 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="../images/cbd.jpg">
                                </a>
                            </div>
                            <!-- 第四张 -->
                            <div class="mui-slider-item">
                                <a href="#">
                                    <img src="../images/yuantiao.jpg">
                                </a>
                            </div>
                            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                            <div class="mui-slider-item mui-slider-item-duplicate">
                                <a href="#">
                                    <img src="../images/shuijiao.jpg">
                                </a>
                            </div>
                        </div>
                        <div class="mui-slider-indicator">
                            <div class="mui-indicator mui-active"></div>
                            <div class="mui-indicator"></div>
                            <div class="mui-indicator"></div>
                            <div class="mui-indicator"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">文字排版</a>
                <div class="mui-collapse-content">
                    <h1>h1. Heading</h1>
                    <h2>h2. Heading</h2>
                    <h3>h3. Heading</h3>
                    <h4>h4. Heading</h4>
                    <h5>h5. Heading</h5>
                    <h6>h6. Heading</h6>
                    <p>
                        p. 目前最接近原生App效果的框架。
                    </p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">其他选项</a>
                <div class="mui-collapse-content">
                    <button id='alertBtn' style="width: 200px" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button><br/><br/>
                    <button id='confirmBtn' style="width: 200px" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button><br/><br/>
                    <button id='promptBtn' style="width: 200px" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button><br/><br/>
                    <button id='toastBtn' style="width: 200px" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button><br/><br/>
                    <button id = "dian" style="width: 200px" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" onclick="click123()">详细组件</button>
                <H5 style="color: #67C962" id="info"></H5>
                </div>
                <%--<div class="mui-content-padded" style="margin: 5px;text-align: center;">--%>
                    <%--<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>--%>
                    <%--<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>--%>
                    <%--<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>--%>
                    <%--<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>--%>
                    <%--<button id = "dian" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" onclick="click123()">详细组件</button>--%>
                    <%--<div style="color: #67C962" id="info"></div>--%>
                <%--</div>--%>
            </li>
        </ul>
    </div>
</div>
<script src="../js/MUI/mui.min.js"></script>
<script src="../js/one.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
</script>
</body>
</html>
